<template>
	<view class="home">
		<swiper indicator-dots autoplay circular>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image class="banner-item" :src="item.thumb"></image>
			</swiper-item>
		</swiper>
		<!-- 加载商品组件 -->
		<!-- <shopping-list @shoppingItemsClick="goShoppingDetail" :shopping="shopping"></shopping-list> -->
		<view class="hos-list-box">
			<view class="hos-item-box" v-for="list in hospital" :key="list.id" @click="hospitalDetail(list.id)">
				<view class="hos-thumb-box"><image :src="list.logo"></image></view>
				<view class="hos-text-box">
					<text class="hos-title">{{list.companyname}}</text>
					<view class="grade-box">
						<text class="score">{{list.rank.all}}</text>
						<text class="comments_num">{{list.rank.count.dianping_count}}</text>
						<view class="start-box">
							<image class="start-img" src="../../static/imgs/diamond.png"></image>
							<image class="start-img" src="../../static/imgs/diamond.png"></image>
							<image class="start-img" src="../../static/imgs/diamond.png"></image>
							<image class="start-img" src="../../static/imgs/diamond.png"></image>
							<image class="start-img" src="../../static/imgs/diamond.png"></image>
						</view>
					</view>
					<view class="propert-box">
						<text>{{list.grandparent_type}}</text>
						<text>{{list.other_name}}</text>
						<text>{{list.category}}</text>
					</view>
					<view class="position_info">{{list.distance}}</view>
					<view class="address_info">{{list.address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import shoppingList from '../../components/shopping-list/shopping-list.vue'
	export default {
		data() {
			return {
				pageindex:1,
				swipers:[],
				// shopping:[]
				hospital:[]
			}
		},
		onLoad() {
			this.getSwiper()
			// this.getFirstShopping()
			this.getHospitalList()
		},
		// components:{"shopping-list":shoppingList},
		methods: {
			//获取轮播图数据
			async getSwiper(){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=home&a=banner'
				})
				this.swipers = res.data.data.banner
			},
			
			async getHospitalList(callback){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=hospital_page&a=hospital_list&page='+this.pageindex
				})
				this.hospital = [...this.hospital,...res.data.data.list]
				callback && callback()
			},
			
			hospitalDetail(id){
				uni.navigateTo({
					url:'/pages/hospitalDetail/hospitalDetail?id='+id
				})
			},
			onReachBottom() {
				this.pageindex++
				this.getHospitalList()
			},
			onPullDownRefresh() {
				this.pageindex = 1
				this.hospital = []
				setTimeout(()=>{
					this.getHospitalList()
					uni.stopPullDownRefresh()
				},1000)
			},
			
			//获取首页商品数据列表
			// async getFirstShopping(){
			// 	const res = await this.$myRequest({
			// 		url:'/index.php?m=app&c=shopping&a=index&page=1'
			// 	})
			// 	this.shopping = res.data.data.list
			// },
			//跳转到商品详情页
			// goShoppingDetail(id){
			// 	uni.navigateTo({
			// 		url:'/pages/shopping-detail/shopping-detail?id='+id
			// 	})
			// }
		}
	}
</script>

<style>
	.banner-item{
		width: 100%;
		height: 100%;
	}
	
	.hos-list-box{
	}
	.hos-item-box{
		display: flex;
		justify-content: space-between;
		padding: 10px 0px;
		border-bottom: 1px solid #f1eded;
	}
	.hos-thumb-box{
		flex: 1;
		width: 130px;
		height: 130px;
		padding: 10px;
		overflow: hidden;
	}
	
	.hos-thumb-box image{
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	
	.hos-text-box{
		flex: 2;
		padding: 10px;
	}
	.hos-title{
		font-size: 16px;
		color: #373737;
		font-weight: bold;
		display: block;
		box-sizing: border-box;	
	}
	.grade-box{
		margin: 5px auto;
	}
	
	.score{
		display: inline-block;
		vertical-align: middle;
		font-size: 14px;
		color: #5a9ee2;
		font-size: 13px;
		font-weight: 600;
	}
	
	.comments_num{
		color: #898989;
		font-size: 12px;
		margin: 0px 10px;
	}
	
	.start-box{
		display: inline-block;
	}
	
	.start-img{
		width: 10px;
		height: 10px;
		margin: 0 2px;
	}
	.propert-box text{
		border: 1px solid #5a9ee2;
		border-radius: 5px;
		display: inline-block;
		margin: 5px;
		padding: 2px 4px;
		color: #5a9ee2;
		font-size: 15px;
	}
	
	.propert-box text:nth-child(1){
		margin-left: 0px;
	}
	
	.position_info{
		display: block;
		padding: 5px;
		color: #898989;
		font-size: 13px;
	}
	
	.address_info{
		display: block;
		padding: 5px;
		color: #898989;
		font-size: 13px;
	}
</style>
